<template>
	<view class="test-drive-container">
		<!-- 背景图片 后续切换 -->
		<image src="../../static/images/right-arrow.png" mode=""></image>
		<!-- 预约试驾 -->
		<view class="driver-box">
			<view class="title">
				预约试驾
			</view>
			<view class="picker-action" @click="show = true">
				试驾地点
				<view class="placeholder" v-if="selectedData.length == 0">
					请选择试驾地点
				</view>
				<view class="address" v-else v-for="(item,index) in selectedData" :key="index">
					{{item}}
				</view>

			</view>
			<view class="phone">
				手机号
				<p>199****3312</p>
			</view>
			<view class="checkbox">
				<checkbox-group @change="isAgreement">
					<label>
						<checkbox value="1" style="transform:scale(0.7)" />
					</label>
				</checkbox-group>
				<p>我已阅读并同意
					<a href="">《预约试乘试驾隐私政策》</a>及<a href="">《预约试乘试驾用户协议》</a>
				</p>
			</view>
			<button type="default" class="action" @click="pushUserData">一键预约</button>
		</view>
		<u-picker :show="show" ref="uPicker" :loading="loading" :columns="columns" @cancel="setClose()"
			@change="getUserSelectedData" @confirm="confirm($event)" :itemHeight="80"></u-picker>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		computed: {
			...mapState({
				userInfo: state => state.userInfo
			})
		},
		data() {
			return {
				list: [],
				activeIndex: 0,
				show: false,
				loading: false,
				columns: [
					['深圳', '厦门', '上海', '拉萨']
				],
				agreement: false,
				selectedData: []
			}
		},
		methods: {
			// 关闭遮罩框
			setClose() {
				this.show = false
			},
			// 获取数据
			getUserSelectedData(e) {
				console.log(e.value);
				// this.show = false
				this.selectedData = e.value
			},
			confirm(e) {
				this.show = false
				console.log(e);
				this.selectedData = e.value
			},
			isAgreement(e) {
				this.agreement = e.target.value[0]
			},
			// 发起请求
			pushUserData() {
				if (this.selectedData.length == 0) {
					uni.showToast({
						title: '请选择预约地点!',
						icon: 'none'
					})
					return
				}
				if (!this.agreement) {
					uni.showToast({
						title: '请勾选隐私政策及隐私协议!',
						icon: 'none'
					})
					return
				}
				this.$http.post(
					'', {}, {
						log: true,

					}
				)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.test-drive-container {
		height: 100vh;
		background: #141519;

		.driver-box {
			box-sizing: border-box;
			background-color: rgba(255, 255, 255, 0.15);
			padding: 45rpx;
			width: 95%;
			position: fixed;
			left: 50%;
			transform: translateX(-50%);
			border-radius: 20rpx;
			top: 50%;
			display: flex;
			flex-direction: column;
			gap: 60rpx;

			.title {
				color: white;
				font-size: 40rpx;
				font-weight: 200;

			}

			.picker-action {
				color: white;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.placeholder {
					color: rgba(255, 255, 255, 0.4);
					font-size: 12px;
				}
			}

			.phone {
				display: flex;
				align-items: center;
				color: white;
				justify-content: space-between;
			}

			.action {
				width: 100%;
				border-radius: 30rpx;
				background-color: orange;
				color: white;
			}

			.checkbox {
				color: white;
				display: flex;
				align-items: center;
			}

			a {
				color: skyblue;
				text-decoration: none;
			}
		}
	}
</style>